<script setup>
import { ref, computed } from 'vue'

const degree = ref(0)

const cssDegree = computed(() => {
    return degree.value + 'deg'
})

const conicDegreeValue = ref(0)
const conicLeftValue = ref(100)
const conicTopValue = ref(100)

const conicDegree = computed(() => {
    return conicDegreeValue.value + 'deg'
})

const conicLeft = computed(() => {
    return conicLeftValue.value + 'px'
})

const conicTop = computed(() => {
    return conicTopValue.value + 'px'
})

/* 径向渐变 */

</script>

<template>
    <div class="wrapper">
        <div class="gradient-block">
            <div class="block-title">线性渐变 linear-gradient</div>
            <div class="block-content">
                <div style="display: flex; align-items: center;">
                    <div style="white-space: nowrap;">渐变的度数：</div>
                    <el-slider style="" size="small" v-model="degree" :min="0" :max="360" />
                </div>

                <div>background: linear-gradient({{ degree }}deg, #ff0000, #00ff00);</div>

                <div class="gradient-box"></div>

                <div>0deg: to top</div>
                <div>90deg: to right</div>
                <div>180deg: to bottom</div>
                <div>270deg: to left</div>
            </div>
        </div>

        <div class="gradient-block">
            <div class="block-title">锥形渐变 conic-gradient</div>
            <div class="block-content">
                <div>
                    <code>{{ `conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )` }}</code>
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="white-space: nowrap;">渐变的度数：</div>
                    <el-slider style="" size="small" v-model="conicDegreeValue" :min="0" :max="360" />
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="white-space: nowrap;">中心点left：</div>
                    <el-slider style="" size="small" v-model="conicLeftValue" :min="0" :max="200" />
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="white-space: nowrap;">中心点top：</div>
                    <el-slider style="" size="small" v-model="conicTopValue" :min="0" :max="200" />
                </div>

                <div class="conic-gradient-box"></div>

                <div>饼状图</div> 

                <div class="pie"></div>

                <div>取色板</div> 

                <div class="hs-wheel"></div>

                <div>棋盘</div> 

                <div class="checkerboard"></div>

                <div>加载框</div> 

                <div class="loading"></div>
            </div>
        </div>

        <div class="gradient-block">
            <div class="block-title">径向渐变 radial-gradient</div>
            <div class="block-content">
                <p>background: radial-gradient(yellow, red);渐变根据容器自身大小自行决定渐变类型与位置</p>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(yellow, red);"></div>

                <p>background: radial-gradient(circle, yellow, red);圆形渐变，渐变终点为起到到最远得边角得距离</p>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(circle, yellow, red);"></div>

                <p style="font-weight: bold;">指定渐变起点</p>

                <p>background: radial-gradient(circle at 50px 50px, yellow, red);圆形渐变，指定渐变起点</p>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(circle at 50px 50px, yellow, red);"></div>

                <p style="font-weight: bold;">指定渐变终点</p>

                <div>radial-gradient(closest-side circle at 75px 75px, yellow, red);渐变中心距离容器最近的边作为终止位置</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(closest-side circle at 75px 75px, yellow, red);"></div>

                <div>radial-gradient(closest-corner circle at 75px 75px, yellow, red);渐变中心距离容器最近的角作为终止位置</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(closest-corner circle at 75px 75px, yellow, red);"></div>

                <div>radial-gradient(farthest-side circle at 75px 75px, yellow, red);渐变中心距离容器最远的边作为终止位置</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(farthest-side circle at 75px 75px, yellow, red);"></div>

                <div>radial-gradient(farthest-corner circle at 75px 75px, yellow, red);渐变中心距离容器最远的角作为终止位置</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(farthest-corner circle at 75px 75px, yellow, red);"></div>

                <div>radial-gradient(150px circle at 75px 75px, yellow, red); 指定具体的距离作为终止位置</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(150px circle at 75px 75px, yellow, red);"></div>

                <p style="font-weight: bold;">渐变颜色断点</p>

                <div>radial-gradient(closest-side circle, yellow, red 30%, green 50%, blue 90%, white); 具体的颜色与位置(0~100%)</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(closest-side circle, yellow, red 30%, green 50%, blue 90%, white);"></div>

                <p style="font-weight: bold;">椭圆类型径向渐变</p>
                <div>radial-gradient(150px 75px ellipse, yellow, red, green, blue, white); 指定椭圆的横轴半径，纵轴半径，此例表示绘制一个宽度300，高度150的椭圆径向渐变</div>
                <div style="border: 1px solid #ccc; width: 300px;height: 150px; background: radial-gradient(150px 75px ellipse, yellow, red, green, blue, white);"></div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    padding: 10px;
    height: 100%;
    overflow: auto;
}

.gradient-block {
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.block-title {
    padding: 5px;
    background: #eee;
}

.block-content {
    padding: 10px;
}

.gradient-box {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    border: 1px solid #ccc;
    background: linear-gradient(v-bind(cssDegree), #ff0000, #00ff00);
}

.conic-gradient-box {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    border: 1px solid #ccc;
    background: conic-gradient(from v-bind(conicDegree) at v-bind(conicLeft) v-bind(conicTop), #ff0000, #00ff00);    
}

.pie {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius: 50%;
    background: conic-gradient(#ff0000 0deg 135deg, #00ff00 135deg 270deg, #0000ff 270deg 360deg);
}

.hs-wheel {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius: 50%;
    background: radial-gradient(closest-side, gray, transparent),
        conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}

.checkerboard {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    border: 1px solid #eee;
    background: conic-gradient(white 0deg 90deg, #ececec 90deg 180deg, white 180deg 270deg, #ececec 270deg 360deg);
    background-size: 20px 20px;
}

.loading {
    width: 50px;
    height: 50px;
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius: 50%;
    background: conic-gradient(white,rgb(8, 207, 252));
    animation: loading 1s infinite linear;
    mask-image: radial-gradient(closest-side, transparent 75%, black 76%);
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>